@extends('public.base')
@section('body')
    <style>
        .layui-unselect dl {
            max-height: 160px;
        }

        html {
            background-color: #fff;
        }
        .class-img:hover a.del { color: #27A9E3; border-color: #27A9E3;border: 1px solid #f00; display: block;}
        .class-img  a.del {     font-family: Tahoma;
            font-size: 10px;
            line-height: 14px;
            color: #CCC;
            background-color: #FFF;
            vertical-align: middle;
            text-align: center;
            display: none;
            width: 18px;
            height: 18px;
            border: solid 1px;
            border-radius: 8px;
            z-index: 2;
            top: 1px;
            right: 3px;
        }
    </style>
    <div class="layui-fluid">
        <div class="layui-card">
            <div class="layui-card-header">会员充值</div>
            <div class="layui-row" style="width: 1000px;">
                <form id="main_form" class="layui-form layui-form-pane" action="" method="post" lay-filter="main-form-group">
                    <input type="hidden" name="id" value="">
                    <div class="layui-form-item">
                        <label class="layui-form-label">下单时间</label>
                        <div class="layui-input-block">
                            <input type="text" class="layui-input" id="start_time" name="add_time"
                                   lay-verType="tips"
                                   autocomplete="off"
                                   format="date" placeholder="开始时间">
                        </div>
                    </div>

                    <div class="layui-form-item">
                        <label class="layui-form-label">充值会员</label>
                        <div class="layui-input-inline">
                            <input type="text" name="pay_username" id="username" lay-verify="required"
                                   placeholder="请输入名称"
                                   autocomplete="off" class="layui-input">
                            <input type="hidden" name="pay_uid" id="user_id" value=""/>
                        </div>
                        <button type="button" class="layui-btn layui-btn-primary"
                                id="icon_select">
                            <i class='layui-icon layui-icon-search'></i>
                        </button>
                    </div>


                    <div class="layui-form-item">
                        <div class="layui-input-inline" style="width: 260px;">
                            <label class="layui-form-label">充值金额</label>
                            <div class="layui-input-block">
                                <input type="text" name="all_amount" lay-verify="required" autocomplete="off"
                                       placeholder="请输入总金额:0.00"
                                       class="layui-input" value="">
                            </div>
                        </div>
                        <div class="layui-input-inline" style="width:260px;">
                            <label class="layui-form-label">赠送金额</label>
                            <div class="layui-input-block">
                                <input type="text" name="collected_amount" lay-verify="required" autocomplete="off"
                                       placeholder="请输入赠送金额:0.00"
                                       class="layui-input" value="">
                            </div>
                        </div>


                    </div>

                    <div class="layui-form-item">
                        <div class="layui-input-inline" style="width: 260px;">
                            <label class="layui-form-label">购买次数</label>
                            <div class="layui-input-block">
                                <input type="text" name="buy_num" lay-verify="required" autocomplete="off"
                                       placeholder="请输入购买次数"
                                       class="layui-input" value="">
                            </div>
                        </div>
                        <div class="layui-input-inline" style="width: 260px;">
                            <label class="layui-form-label">微信号</label>
                            <div class="layui-input-block">


                                <input type="text" name="wx_no" placeholder="微信号或是名称" id="tags" class="layui-input">
                                <span id="buy_select_no_text" style="color:red"><input type="hidden" name="wx_no" value=""  class="layui-input"  /></span>
                            </div>
                        </div>
                        <div class="layui-input-inline" style="width: 45%;">
                            <label class="layui-form-label">付款方式</label>
                            <div class="layui-input-block">
                                <select  name="pay_type">
                                    <option value="">选择付款方式</option>
                                    @foreach($paytypeList  as $k=>$v)
                                        <option value="{{$v['title']}}">{{$v['title']}}</option>
                                    @endforeach
                                </select>
                            </div>
                        </div>
                    </div>

                    <div class="layui-form-item">


                        <div class="layui-input-inline" style="width: 260px;">
                            <label class="layui-form-label">销售员</label>
                            <div class="layui-input-block">
                                <select name="sale_id" class="form-control ">
                                    <option value="">
                                        请选择
                                    </option>
                                    @foreach($memberList as $k=>$v)
                                        <option value="{{$v->uid}}" @if($v==$mid) selected="selected" @endif> {{$v->nickname}}</option>
                                    @endforeach
                                </select>
                            </div>
                        </div>
                        <div class="layui-input-inline" style="width: 260px;border-color: #e6e6e6;    border-width: 1px;">
                            <label class="layui-form-label">粉丝类型</label>
                            <div class="layui-input-block">
                                <select  name="add_fen_type" class="fen" >
                                    <option value="新粉">新粉</option>
                                    <option value="老粉">老粉</option>
                                    <option value="复购">复购</option>
                                </select>
                            </div>
                        </div>
                        <div class="layui-input-inline" style="width: 260px;border-color: #e6e6e6;    border-width: 1px;">
                            <label class="layui-form-label">本月粉丝</label>
                            <div class="layui-input-block">
                                <input type="checkbox" checked="" name="add_fen_month"
                                       lay-skin="switch" lay-text="本月|非本月" value="1">
                            </div>
                        </div>

                    </div>

                    <div class="layui-form-item layui-form-text">
                        <label class="layui-form-label">备注</label>
                        <div class="layui-input-block">
                            <textarea name="remark" placeholder="请输入其它信息"  lay-verify="required" class="layui-textarea"></textarea>
                        </div>
                    </div>

                    <div class="layui-card">
                        <div class="layui-card-header">上传多张图片</div>
                        <div class="layui-card-body">
                            <div class="layui-upload">
                                <button type="button" class="layui-btn" id="test-upload-more">多图片上传</button>
                                <blockquote class="layui-elem-quote layui-quote-nm" style="margin-top: 10px;">
                                    预览图：
                                    <div class="layui-upload-list" id="test-upload-more-list"></div>
                                </blockquote>
                                <input type="hidden" name="smeta" id="smeta" value="" />
                            </div>
                        </div>
                    </div>

                    <div class="layui-form-item layui-layout-admin" >
                        <div class="layui-input-block">

                            <div style="left: 0;">
                                <button id="form_save" lay-filter="form_save" class="layui-btn"
                                        lay-submit="">
                                    保存
                                </button>
                                <button id="form_reset" type="button" class="layui-btn layui-btn-primary">重置</button>
                            </div>
                        </div>
                    </div>
                </form>
            </div>
        </div>
    </div>
    <link rel="stylesheet" href="{{ADMIN_PATH}}jqueryui/jquery-ui.css">
    <script src="{{ADMIN_PATH}}/lib/jquery-2.1.0.js"></script>
    <script src="{{ADMIN_PATH}}/lib/jquery-migrate-1.2.1.min.js"></script>
    <script src="{{ADMIN_PATH}}jqueryui/jquery-ui-1.10.3.min.js"></script>
    <script src="{{ADMIN_PATH}}layui/layuiadmin/layui/layui.js"></script>
    <script src="{{ADMIN_PATH}}js/admin.common.js"></script>

    <script>

        //========================================== 说明区 ==========================================
        //注意：选项卡tab 依赖 element 模块，否则无法进行功能性操作

        // ==========================  公共变量区  ========================================
        var form_id = 'main_form';
        var save_url = '{{url('admin/ordersys/vip/add')}}';
        var like_url = '{{url('admin/ordersys/vip/like')}}';
        var select_user_url='{{url('admin/ordersys/customer/user_list')}}';
        var up_url = '{{url('public/upload/pic')}}';

        // ==============================  业务处理  ==============================================
        layui.use(['element', 'form'], function () {
            //========================================== layui引用区 ==========================================
            //var $ = layui.$
            var   $ = layui.jquery
                , form = layui.form
            ;
            //========================================== 页面初始化 ==========================================
            //1、初始化form值:1、后台传来的数据


            //2、初始化编辑器，需要在 初始化form后面，因为editor要调隐藏域的内容
            //var editor = create_editor('memo');

            //========================================== 数据提交、元素事件绑定区 ==========================================

            /* 监听提交 */
            form.on('submit(form_save)', function(data){
                var index = parent.layer.getFrameIndex(window.name); //先得到当前iframe层的索引
                $.post(save_url, data.field, function (res) {
                    try {
                        if(res.status==200) {
                            //重新刷新父窗口的数据区
                            layer.msg(res.message);
                            setTimeout(function () {
                                window.location.reload();
                            }, 2000);
                        }else{
                            layer.msg(res.message);
                        }
                    } catch (e) {
                        layer.msg("异常");
                    }

                }, "json");

                return false;
            });

            //2、表单重置
            $('#form_reset').click(function () {
                /* 因为1、通过json赋值 2、layui需要重新渲染form的一些组件 3、有页面会集成kindeditor ，所以重置表单通过刷新浏览器实现最简便 */
                layer.confirm('确定重载表单吗？', function (index) {
                    //1、选择确定后执行的操作
                    window.location.reload();

                    //2、

                    //99、关闭自身窗口，请放在函数内部最后一行
                    layer.close(index);

                });
            });

            $('#icon_select').click(function () {

                var index = layer.open({
                    type: 2
                    , title: '选择用户:'
                    , content: select_user_url
                    , area: ['80%', '500px'] //宽高
                    , scrollbar: false
                    , cancel: function (index, layero) {
                    }
                });

            });

            //========================================== 渲染区 ==========================================
            //表单重新渲染，请保存到最后一行
            //渲染表单
            form.render();

        });
        //=============================================时间选框================================================
        layui.use('laydate', function () {
            var laydate = layui.laydate;

            //开始日期
            var insStart = laydate.render({
                elem: '#start_time'
                , type: 'datetime'
                ,value: new Date()
                , done: function (value, date) {

                }
            });


        });
        //上传组件
        layui.use('upload', function () {
            var $ = layui.$
                , form = layui.form
            ;
            var upload = layui.upload;
            //多图片上传
            upload.render({
                elem: '#test-upload-more'
                ,url: up_url
                ,multiple: true
                ,before: function(obj){
                    //预读本地文件示例，不支持ie8
                    // obj.preview(function(index, file, result){
                    //     $('#test-upload-more-list').append('<img src="'+ result +'" alt="'+ file.name +'" class="layui-upload-img">')
                    // });
                }
                ,done: function(res){
                    var show_val=$("#smeta").val();
                    var new_string = StringOperate.add(show_val,res.data.src);
                    //上传完毕
                    $("#smeta").val(new_string);
                    $('#test-upload-more-list').append('<div class="class-img"><img src="'+ res.data.src +'" alt="'+  res.data.src +'" class="layui-upload-img"><a href="javascript:void(0)" class="del"   title="移除" delid="' + res.data.src + '">X</a></div>')
                    $(".del").click(function(){
                        var str = $("#smeta").val();
                        var delid = $(this).attr("delid");
                        var sb = StringOperate.remove(str, delid);
                        $("#smeta").val(sb);
                        $(this).closest(".class-img").fadeOut("fast", function (){
                            $(this).remove();
                        });
                    });
                    layui.msg("上传成功");
                }
            });
            //拖拽上传
            upload.render({
                elem: '#test-upload-drag'
                ,url:up_url
                ,done: function(res){
                    console.log(res)
                }
            });
            //执行实例
            var uploadInst = upload.render({
                elem: '#upload_wap_img' //绑定元素
                , url: up_url //上传接口
                , field: 'file'
                , before: function (obj) { //obj参数包含的信息，跟 choose回调完全一致，可参见上文。
                    layer.load(1); //上传loading
                }
                , done: function (res) {
                    if (res.status == 200) {
                        var src = res.data.src;
                        $("#upload_wap_img_val").val(src);
                    } else {
                        layer.msg(res.msg);
                    }
                    //上传完毕回调
                    layer.closeAll('loading'); //关闭loading
                }
                , error: function () {
                    //请求异常回调
                    layer.closeAll('loading'); //关闭loading
                }
            });

        });

        //====================================自动填充================================
        $( "#tags" ).autocomplete({

            source: like_url,
            minLength: 1,
            select: function( event, ui ) {
                var v=ui.item.id;
                var name=ui.item.name;
                $("#buy_select_no_text").html('<input type="hidden" name="wx_no" value="'+v+'"  />'+name);

//log( ui.item ?
                //  "Selected: " + ui.item.value + " aka " + ui.item.id :
                //  "Nothing selected, input was " + this.value );
            },
            close: function() {
                // $( "#tags" ).val("");
            }

        });

    </script>
@stop
